<template>
  <div class="tabs-box">
    <div class="tabs-menu">
      <el-tabs v-model="tabsValue" type="card" @tab-click="tabClick" @tab-remove="tabRemove">
        <el-tab-pane v-for="item in tabsMenuList" :key="item.path" :label="item.title" :name="item.path"
          :closable="item.close">
          <template #label>
            <el-icon v-if="item.icon" class="tabs-icon">
              <component :is="item.icon"></component>
            </el-icon>
            {{ item.title }}
          </template>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { TabPaneName, TabsPaneContext } from 'element-plus';
import { computed, onMounted, ref, watch } from 'vue';
import { useUserStore, useTabsStore } from '@/stores';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute()
const router = useRouter()

const userStore = useUserStore()
const tabStore = useTabsStore()
// 当前选择
const tabsValue = ref(route.fullPath)
// console.log(route);

const tabsMenuList = computed(() => tabStore.tabsMenuList)

onMounted(() => {
  initTabs()
})
// 筛选子路由
function filters(aryRoute: any) {
  let Tabchildrens: any[] = []
  aryRoute.forEach((item: any) => {
    if (item.children && item.children.length > 0) {
      Tabchildrens.push(...item.children)
      const deepchildren = filters(item.children)
      Tabchildrens.push(...deepchildren)
    }
  })
  return Tabchildrens
}

// 初始化需要固定的标签
const initTabs = () => {
  // console.log(userStore.RouterList);
  let tabsRoter = filters(userStore.RouterList)
  // console.log(tabsRoter);
  tabsRoter.forEach((item) => {
    if (item.meta.isAffix) {
      const tabsParams = {
        icon:item.meta.icon,
        title: item.meta.title,
        path: item.path,
        name: item.name,
        close: !item.meta.isAffix,
      }
      tabStore.addTabs(tabsParams)
    }
  })

}

// 标签点击事件
const tabClick = (tabItem: TabsPaneContext) => {
  // console.log(tabItem.props.name ==tabItem.paneName);
  const fullPath = tabItem.props.name as string
  router.push(fullPath)
}
// 标签删除事件
const tabRemove = (path: TabPaneName) => {
  // console.log(path);
  tabStore.removeTabs(path as string, path == route.fullPath)

}



watch(() => route.fullPath, () => {
  tabsValue.value = route.fullPath
  const tabsParams = {
    icon:route.meta.icon,
    title: route.meta.title ,
    path: route.fullPath,
    name: route.name ,
    close: !route.meta.isAffix,
  }
  tabStore.addTabs(tabsParams);
}, { immediate: true })


</script>

<style scoped lang="scss">
.tabs-box {

  // background-color: var(--el-bg-color);
  .tabs-menu {
    position: relative;
    width: 100%;
    :deep(.el-tabs) {
      .el-tabs__header {
        box-sizing: border-box;
        height: 40px;
        padding: 0 10px;
        margin: 0;

        .el-tabs__nav-wrap {
          position: absolute;
          width: calc(100% - 65px);

          .el-tabs__nav {
            display: flex;
            border: none;

            .el-tabs__item {
              display: flex;
              align-items: center;
              justify-content: center;
              color: #afafaf;
              border: none;

              .tabs-icon {
                margin: 1.5px 4px 0 0;
                font-size: 15px;
              }

              .is-icon-close {
                margin-top: 1px;
              }

              &.is-active {
                color: var(--el-color-primary);

                &::before {
                  position: absolute;
                  bottom: 0;
                  width: 100%;
                  height: 0;
                  content: "";
                  border-bottom: 2px solid var(--el-color-primary) !important;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
